<template>
  <div :class="['goodsDetail',{scrollForbidden:showModal==true}]">
    <!-- 头部 -->
    <swiper1 :imgList="imgList"></swiper1>
    <div class="name_wrapper" v-if="goodsDetail">
      <div class="name">
        <div style="font-size:32rpx;font-weight:bold" >{{goodsDetail.goods_info.name}}</div>
        <div class="name_sprice">
          <div>￥{{goodsDetail.goods_info.s_price}}</div>
          <div>{{goodsDetail.max_group_num}}人拼团价</div>
        </div>
        <div class="name_mprice">原价： <span>￥{{goodsDetail.goods_info.m_price}}</span></div>
        <!-- <div>
          <button open-type="share">
            <img src="../../../static/images/goodsDetails/share.png" style="width:38rpx;height:38rpx;">
          </button>
        </div> -->
      </div>
      <div class="price">
        <div>拼团</div>
        <div class="count" v-if="countFlag">
          <div class="count_content">
            <span class="count_tit">距活动结束仅剩 &nbsp;&nbsp;</span>
            <span class="data"><span>{{day}}</span> <span>天</span></span>
            <span class="hour"><span>{{hour}}</span> <span>时</span></span>
            <span class="min"><span>{{min}}</span>  <span>分</span></span>
            <span class="second"><span>{{second}}</span> <span>秒</span></span>
          </div>
        </div>
        <div class="count" v-else>活动结束</div>
      </div>
    </div>
    <!-- 头部结束 -->
    
    <!-- 其他人的拼团 -->
<!--    <div class="otherAssemble_tit" v-if="assembleList.length!=0">以下小伙伴正在发起拼团，你可以直接参加</div>-->
<!--    <swiper-->
<!--    :autoplay='true'-->
<!--    :vertical="true"-->
<!--    class="swpier1"-->
<!--    v-if="assembleList.length!=0"-->
<!--  >-->
<!--      <swiper-item v-for="(item,index) of assembleList " :key="index" @click='toAssembleDetail(item)'>-->
<!--        <div class="otherAssemble">  -->
<!--        <div class="otherAssemble_list">-->
<!--          <div class="otherAssemble_list_item">-->
<!--            <div class="otherAssemble_list_item_img">-->
<!--              <img :src="item.photo_url" alt="" mode="aspectFill">-->
<!--            </div>-->
<!--            <div class="otherAssemble_list_item_content">-->
<!--              <div>{{item.nickname?item.nickname:''}}</div>-->
<!--              <div>还差<span>{{item.group_last_num}}</span>人成团，剩余{{discountTimerGroup[index].lastHour}}时{{discountTimerGroup[index].lastMin}}分{{discountTimerGroup[index].lastSecond}}秒</div>-->
<!--            </div>-->
<!--            <div class="otherAssemble_list_item_btn">去凑团</div>-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      </swiper-item>-->
<!--  </swiper>-->
    <!-- 其他人的平团结束 -->

    <!-- 拼团流程 -->
    <div class="count_tip">
      <div>
        拼团流程
      </div>
        <div class="count_tip_item">
          <div>1</div>
          <div>选择商品开团/参团</div>
        </div>
        <div class="count_tip_item">
          <div>2</div>
          <div>邀请好友参团</div>
        </div>
        <div class="count_tip_item">
          <div>3</div>
          <div>个人中心>全部订单，查看状态</div>
        </div>
        <div class="count_tip_item">
          <div>4</div>
          <div>人满成团</div>
        </div>
    </div>
    <!-- 拼团流程结束 -->

    <!-- 规格等详情 -->
    <div class="goods_desc" v-if="goodsDetail">
<!--      <div>-->
<!--        <div class="goods_desc_item sell_num" >-->
<!--          <span>销量</span>-->
<!--          <span>{{goodsDetail.goods_info.sale_count}}</span>-->
<!--        </div>-->
<!--        <div class="goods_desc_item serve" >-->
<!--          <span>邮费</span>-->
<!--          <span>{{goodsDetail.goods_info.express_fee}}</span>-->
<!--        </div>-->

<!--        <div class="goods_desc_item desc" @click="toGoodsIntroduce(0)" >-->
<!--          <span>详情</span>-->
<!--          <span>详情介绍</span>-->
<!--          <span class="list_item_arrow">-->
<!--            <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/right.png" alt="">-->
<!--          </span>-->
<!--        </div>-->
<!--        <div class="goods_desc_item" @click="toGoodsIntroduce(1)" >-->
<!--          <span>评论</span>-->
<!--          <span class="list_item_arrow">-->
<!--            <img src="https://rzkeji.oss-cn-shenzhen.aliyuncs.com/web/recruit/icon/right.png" alt="">-->
<!--          </span>-->
<!--        </div>-->
        <!-- 规格等详情结束 -->

        <!-- 评论列 -->
<!--        <div class="comment" >-->
<!--          <div class="comment_item" v-for="(value,index) in commentList.data" v-show="index<5" :key="index">-->
<!--            <div class="comment_item_top">-->
<!--              <div class="comment_item_nick">{{value.user_info.nickname}}</div>-->
<!--              <div class="comment_item_time">{{value.created_at}}</div>-->
<!--            </div>-->
<!--            <div class="comment_item_content">{{value.content}}</div>-->
<!--            <div class="comment_item_pic">-->
<!--              <img :src="value1" mode="aspectFill" v-for="(value1,index1) in value.comment_img" @click="previewImage(value1,value.comment_img)" :key="index1">-->
<!--            </div>-->
<!--          </div>-->

<!--          <div class="comment_btn">-->
<!--            <div class="comment_btn_all" @click="toGoodsIntroduce(1,true)">所有评价({{commentList.total_comment_num}})</div>-->
<!--            <div class="comment_btn_pic" @click="toGoodsIntroduce(1,false)">有图评价({{commentList.have_img_comment_num}})</div>-->
<!--          </div>-->
<!--        </div>-->
        <!-- 评论列结束 -->
<!--      </div>-->

       <!-- 商品介绍 -->
        <div class="goods_introduce">
          <div>商品详情</div>
          <div class="content">
            <div v-html="goodsDetail.goods_info.detail"></div>
          </div>
          <!-- <div>海外品暂不支持7天无理由退换，介意请慎拍，谢谢！</div> -->
<!--          <img :src="value" alt="" v-for="(value,index) in goodsDetail.goods_info.detailed_description" @click="previewImage(value, goodsDetail.goods_info.detailed_description)" :key="index" mode="widthFix">-->
        </div>
        <!-- 商品介绍结束 -->

        <!-- 底部购物栏 -->
        <div class="cartBar">
          <div class="cartBar_left" >
            <div class="cartBar_left_item" @click="toHome">
              <img src="../../../static/images/tabBar/home.png" alt="">
              <div>首页</div>
            </div>
            <div class="cartBar_left_item">
              <img src="../../../static/images/goodsDetails/kefu.png" alt="">
              <div><button open-type="contact">客服</button></div>
            </div>
          </div>
          <div class="cartBar_right" >
            <div @click="buyOnly">￥{{goodsDetail.goods_info.alone_price}}单买</div>
            <div @click="assemble_start">￥{{goodsDetail.goods_info.group_price}}开团</div>
          </div>
        </div>
        <!-- 底部购物栏结束 -->

        <!-- 弹出层 -->
        <div class="mask"  v-if="showModal" @click="hideCart"></div>
        <div class="modalDlg" v-if="showModal">
          <div class="modalDlg_top">
            <img :src="goodsDetail.goods_info.thumb_url" alt="">
            <div class="modalDlg_top_right">
              <div class="modalDlg_top_right_name">
                <!-- <span class="modalDlg_top_right_name_tag">海外购</span> -->
                <span>{{goodsDetail.goods_info.name}}</span>
              </div>
              <div class="cart_price">
                <span>￥{{classifyIndex==-1?goodsDetail.goods_info.s_price:(buyType=='direct'?goodsDetail.goods_info.goods_spu_info[classifyIndex].price:goodsDetail.goods_info.goods_spu_info[classifyIndex].many_price)}}</span>
                <span>库存：{{classifyIndex==-1?goodsDetail.goods_info.stock:goodsDetail.goods_info.goods_spu_info[classifyIndex].stock}}</span>
              </div>
            </div>
          </div>
          <div class="modalDlo_center">
            <div class="modalDlo_center_tit" v-if="goodsDetail.goods_info.goods_spu_info.length!=0">规格</div>
            <div class="modalDlo_center_classify">
              <div
                v-for="(item,index) of goodsDetail.goods_info.goods_spu_info"
                 :key="index" @click="select_classify(item,index)"
                 :class="{selectClassify:index==classifyIndex}"
                 >
                 {{item.spu_name}}
                </div>
            </div>
          </div>
          <div class="modalDlo_bottom">  
           <count @numberChange="numberChange" :stock="classifyIndex==-1?goodsDetail.goods_info.stock:goodsDetail.goods_info.goods_spu_info[classifyIndex].stock"><div>购买数量</div></count>
          </div>
          <div class="join_cart"  @click="buying" v-if="showAssemble">下一步</div>
          <div class="join_cart"  @click="buying" v-else>
            立即购买
            <!-- <div @click="addCart">加入购物车</div> -->
            <!-- <div @click="buying">立即购买</div> -->
          </div>
        </div>
        <!-- 弹出层结束 -->
    </div>
  </div>
</template>

<script>
import swiper1 from '@/components/swiper'
import count from '@/components/count'

export default {
  name:'goodsDetail',
  components:{
    swiper1,
    count,
  },
  data(){
    return{
      activeId:'',//活动id
      id:'',//商品id
      goodsDetail:'',//商品信息
      showModal: false,//显示弹出层
      num:1,//购买商品数量
      cartListNum:'',//购物车数量
      commentList:"",   //评论内容
      imgList:'',
      classifyIndex:-1,//规格索引
      classifyId:'',//规格id
      countdown:'',
      day:'',
      hour:'',
      min:'',
      second:'',
      endDate2: '',
      countTimer:'',//定时器
      countFlag:true,//显示倒数
      showAssemble:'',
      buyType:'',//direct单买，assemble团购
      assembleList:'',//拼团轮播
      discountTimerGroup:'',//倒计时数组
      countTimerGroup:[],//用于清除倒计时

    }
  },
  onLoad(options){
    this.activeId=options.activeId;
    this.id=options.id
    wx.setStorageSync('toPage',`/pages/goodsAssemble/main?activeId=${this.activeId}&id=${this.id}`)
    this.getGoodsDetails(this.activeId)
    this.getAssembleList()
    // this.getComment()
  },
  watch:{
    goodsDetail(nval){
      if(nval.goods_info.goods_banner.length!=0){
        this.imgList=nval.goods_info.goods_banner
      }else{
        this.imgList=[nval.goods_info.thumb_url]
      }
    }
  },
  methods: {
    previewImage(value,value1){
      this.$currency.previewImage(value,value1)
    },
    assemble_start(){//显示立即购买
    this.buyType='assemble'
      this.num=1;//清除规格数量
      this.showAssemble=true
      this.showModal=true
      
    },
    buyOnly(){
      this.buyType='direct'
      this.num=1;
      this.showAssemble=false;
      this.showModal=true
    },
    async buying(){   //点击弹窗的立即购买
    var groupType=''
      if(this.num<=0){
          this.$currency.showToast('购买数量不能为0');
          return
        }else if(this.classifyId==''){
          this.$currency.showToast('先选择规格吧');
          return
        }
        if(this.buyType=='direct'){
          groupType='alone'
        }else if(this.buyType=='assemble'){
          groupType='initiate'
        }
      let res=await this.$request.postData('/order/buildOrder',{
        type:'group',
        goods_id:this.id,
        num:this.num,
        goods_spu_id:this.classifyId,
        activity_id:this.activeId,
        group_type:groupType,
        user_token:wx.getStorageSync('userToken'),
        shop_id: wx.getStorageSync('shop_id')
        })
      if(res.data.level=='success'){
        this.$store.dispatch('setOrder',res.data.data)
        // this.weChatPayment(res.data.data.order_num);
        if(this.credit=='credit'){
          this.$currency.navigateTo(`/pages/orderConfirm/main?from=credit&order_num=${res.data.data.order_num}`)
        }else{
          this.$currency.navigateTo(`/pages/orderConfirm/main?order_num=${res.data.data.order_num}`)
        }
        
      }else{
        this.$currency.showToast(res.data.message)
      }
    },
    async weChatPayment(id){
      let params = {
        user_token: wx.getStorageSync('userToken'),
        order_num: id
      }
      const res = await this.$request.postData('/payment/weChatPayment',params)
      if (res.data.level == 'success'){
        let data = res.data.data;
        wx.requestPayment({
          timeStamp: data.timeStamp,
          nonceStr: data.nonceStr,
          package: data.package,
          signType: data.signType,
          paySign: data.paySign,
          success (res) {
            // console.log('success');
            // this.$currency.showToast('支付成功！')
            // setTimeout(function () {
            //     uni.navigateBack({
            //         delta: 1
            //     })
            // },1500)
            wx.switchTab({
              url: '/pages/home/main'
            })
          },
          fail (res) {
            console.log(res)
          }
        })
      } else {
        uni.showToast({
          icon:'none',
          title: res.data.message
        })
      }
    },
    hideCart() { 
        this.showModal=false
        this.classifyIndex=-1;//重置数据
        this.classifyId=''
        // this.goodsDetail.goods_info.s_price=''
        this.$forceUpdate()
    },
    async getGoodsDetails(id){
      wx.showLoading()
      let res=await this.$request.getData('/activity/getActivityGroupDetail',{activity_group_id:id})
      if(res.data.level=='success'){
        let str = res.data.data;
        str.goods_info.detail = str.goods_info.detail.replace(/<img[^>]*>/gi, function (match, capture) {
          return match.replace(/style\s*?=\s*?([‘"])[\s\S]*?\1/ig, '')
        });
        str.goods_info.detail = str.goods_info.detail.replace(/\<img/gi, '<img style="max-width:100%;height:auto;vertical-align: top;" ');
        this.goodsDetail=str
        // this.goodsDetail=res.data.data
        this.endDate2=this.goodsDetail.end_time
        this.countTime(this.endDate2)
      }
      wx.hideLoading()
    },
    numberChange(num){
        this.num=num
    },
    async getComment(){
      let res=await this.$request.getData('/goods/getUserComment',{goods_id:this.id,limit:5,page:0})
      this.commentList=res.data
    },
    select_classify(item,index){//选择规格
      this.classifyIndex=index
      this.classifyId=item.id
      // if(this.buyType=='direct'){
      //
      //   this.goodsDetail.goods_info.stock=item.stock;
      //   this.goodsDetail.goods_info.s_price=item.price;
      // }
      // if(this.buyType=='assemble'){
      //   this.goodsDetail.goods_info.stock=item.stock;
      //   this.goodsDetail.goods_info.s_price=item.many_price;
      // }
      // this.$forceUpdate()
    },
    // async addCart(){//添加到购物车
    //   if(this.num<=0){
    //     this.$currency.showToast('购买数量不能为0');
    //     return
    //   }else if(this.classifyId==''){
    //     this.$currency.showToast('先选择规格吧');
    //     return
    //   }
    //   var userToken=wx.getStorageSync('userToken')
    //   let res=await this.$request.postData('/goods/addShopCart',{goods_id:this.id,num:this.num,user_token:userToken,goods_spu_id:this.classifyId})
    //   wx.showLoading()
    //   if(res.data.level=='success'){
    //     this.$currency.showToast('成功加入购物车','success',1500);
    //     this.showModal=false;
    //     wx.hideLoading();
    //     this.getCartList()

    //   }else{
    //     this.$currency.showToast(res.data.msg,'none',1500)
    //   }
    // },
    async getAssembleList(){
      //获取轮播的拼团
      const res=await this.$request.getData('/activity/getInitiateGroupList',{activity_group_id:this.activeId})
      if(res.data.level=='success'){
        this.assembleList=res.data.data;
        this.discountTimerGroup= this.assembleList.map(item=>{
          return {'timer':item.end_time}
        })
        this.discountTimerGroup.forEach((item,index)=>{
          this.countTimeGroup(item,index)
        })
      }

    },
    toCart(){
      wx.switchTab({url:'/pages/cart/main'})
    },
    toHome(){
      wx.switchTab({url:'/pages/home/main'})
    },
    toGoodsIntroduce(value,tag){
      wx.navigateTo({url:`/pages/goodsDetailIntroduce/main?index=${value}&&tag=${tag}&&id=${this.id}`})
    },
    countTime(timer) {
      var that = this;
      if(!timer){
        return
      }
    this.countTimer=  setInterval(()=>{
        var date = new Date();
        var now = date.getTime();
        var endDate = new Date(timer);//设置截止时间
        if(isNaN(endDate)){
          // iso不能识别2018-08-30格式时间
          var timer1=timer.replace(/-/g, '/');
          var endDate=new Date(timer1)
        }
        var end = endDate.getTime();
        var leftTime = end - now; //时间差               
        var d, h, m, s, ms;
        if (leftTime >= 0) {
        d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
        h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
        m = Math.floor(leftTime / 1000 / 60 % 60);
        s = Math.floor(leftTime / 1000 % 60);
        // ms = Math.floor(leftTime % 1000);
        // ms = ms < 100 ? "0" + ms : ms
        s = s < 10 ? "0" + s : s
        m = m < 10 ? "0" + m : m
        h = h < 10 ? "0" + h : h

        // this.countdown=d + "：" + h + "：" + m + "：" + s + ":" + ms;
        // console.log(this.countdown)
        this.day=d;
        this.hour=h;
        this.min=m;
        this.second=s
        //递归每秒调用countTime方法，显示动态时间效果
        } else {
        this.countFlag=false
        }
      },1000)
    },
    countTimeGroup(item,index) {//数组倒计时
        var that = this;
        
      const timer=setInterval(()=>{
          var date = new Date();
          var now = date.getTime();
          var endDate = new Date(item.timer);//设置截止时间
          if(isNaN(endDate)){
          // iso不能识别2018-08-30格式时间
          var timer1=item.timer.replace(/-/g, '/');
          var endDate=new Date(timer1)
        }
          var end = endDate.getTime();
          var leftTime = end - now; //时间差               
          var d, h, m, s, ms;
        //  if(leftTime>=86400){//小于1小时才显示倒计时
        //     that.$set(this.discountTimerGroup,index,{...this.discountTimerGroup[index],showLimitData:true})
        //   }
          if (leftTime >= 0) {
          d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
          h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
          m = Math.floor(leftTime / 1000 / 60 % 60);
          s = Math.floor(leftTime / 1000 % 60);
          // ms = Math.floor(leftTime % 1000);
          // ms = ms < 100 ? "0" + ms : ms
          s = s < 10 ? "0" + s : s
          m = m < 10 ? "0" + m : m
          h = h < 10 ? "0" + h : h

          // this.countdown=d + "：" + h + "：" + m + "：" + s + ":" + ms;
          // console.log(d + "：" + h + "：" + m + "：" + s + ":" + ms)

            if(leftTime>=86400){//小于1小时才显示倒计时
                that.$set(this.discountTimerGroup,index,{...this.discountTimerGroup[index],lastDay:d,lastHour:h,lastMin:m,lastSecond:s,state:'showLimit'})
              }else{
                that.$set(this.discountTimerGroup,index,{...this.discountTimerGroup[index],lastDay:d,lastHour:h,lastMin:m,lastSecond:s,state:'hideLimit'})
              }
          
          
          } else {
            that.$set(this.discountTimerGroup,index,{...this.discountTimerGroup[index],lastDay:d,lastHour:h,lastMin:m,lastSecond:s,state:'timeOut'})//显示活动结束
            console.log('已截止')
          }
          },1000)
          this.countTimerGroup.push(timer)
      },
      clearAllInterval(){//清除所有定时器
        this.countTimerGroup.forEach(item=>{         
          if(item){
            clearInterval(item)
          }
        })
      },
      toAssembleDetail(item){
        this.$currency.navigateTo(`/pages/assembleDetail/main?order_num=${item.order_num}`)
      }
  },
    onShareAppMessage(){
    return {
    title: '波罗蛋在线商城',
    desc:'',
  }
  },
  onShow(){
    this.num=1;//清空选择商品的数量
    this.showModal=false//显示弹出层
    this.classifyIndex=-1,//规格索引
    this.classifyId=''//规格id
    this.countFlag=true
    this.$store.dispatch('setCoupon','')//用来清空优惠券，只能这里清空
  },
  onUnload(){
    clearInterval(this.countTimer)
    this.clearAllInterval()
  },
  // onHide(){
  //   clearInterval(this.countTimer)
  //   this.clearAllInterval()
  // }
  
}
</script>

<style scoped lang='scss'>

.scrollForbidden{
  overflow: hidden;/*有弹出层时禁止下层滑动*/
}
/* 头部 */
.goodsDetail{
  width:100%;
  min-height: 100%;
  background:#eee;
}
  .name_wrapper{
    padding:10px;
    background: #fff;
  }
  .name_tag{
    border:1px solid purple;
    color:purple;
    border-radius: 5px;
    padding:2.5px;
    font-size:12px;
    margin-right: 5px;
  }
  .name{
    display: flex;
    flex-wrap: wrap;
    text-align: center;
    align-items: center;
  }
  .name_sprice{
    margin:10px 0;
    width: 100%;
    display: flex;
    align-items: center;
    color:#eb544d;
  }
  .name_sprice>div:first-child{
    
    font-size: 18px;
  }
  .name_sprice>div:last-child{
   border-radius: 5px;
   padding:2.5px 5px;
   margin-left: 10px;
   border:1px solid #eb544d;
  }
  .name_mprice>span{
    text-decoration: line-through;
  }

  .name_man{
    color:#fff;
    background: #eb544d;
  }
  
  .price{
    color: #fff;
    background: #eb544d;
    padding:10px 0;
    margin-top:20px;
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
  .price>span:nth-child(1){
    font-size: 25px;
    margin-right:-10px;
  }
  .price>span:nth-child(2){
    text-decoration: line-through;
  }
  .price .count{
    color:#fff;
  }
  .count_tit{
    margin-bottom: 10px;
  }
  .data>span:first-child,.hour>span:first-child,.second>span:first-child,.min>span:first-child{
    background: #fff;
    margin:0 2.5px;
    color:#eb544d
  }


  /* 中间详情 */
  .goods_desc{
    width:100%;
    margin-top:15px;
  }
  .goods_desc_item{
    background: #fff;
    display: flex;
    height:40px;
    align-items: center;
    margin-bottom:5px;
  }
  .goods_desc_item span:nth-child(1){
    color:rgb(63, 60, 60);
    font-size: 12px;
    margin-left:10px;
    margin-right:20px;
  }
  
  .goods_desc_item img{
    width:20px;
    height:20px;
  }
  .list_item_arrow{
    flex:1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }

/* 评论列 */
  .comment{
    width:100%;
    background:#fff;
  }
  .comment_item{
    padding:5px 10px;
    border-bottom: 1px solid #eee;
    color:rgb(63, 60, 60);
    font-size:14px;
  }
  .comment_item_top{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
  }
  .comment_item_nick{
    color:cornflowerblue;
  }
  .comment_btn{
    margin-top:10px;
    padding:10px 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  .comment_btn_all,.comment_btn_pic{
    width:40%;
    height:30px;
    line-height: 30px;
    padding:2.5px 5px;
    text-align: center;
    border-radius: 5px;
    border:1px solid gray;
  }

  /* 商品介绍 */
  .goods_introduce{
    background: #fff;
    width:100%;
    margin-top:10px;
    padding-bottom:50px;
  }
  .goods_introduce>div:nth-child(1){
    margin-top:5px;
    margin-left: 10px;
  }
  .goods_introduce>div:nth-child(2){
    /*margin-top:5px;*/
    /*margin-left: 10px;*/
    /*!*color:red;*!*/
    /*margin-bottom:20px;*/
    padding: 20rpx;
  }
  .goods_introduce>img{
    width:100%;
    height: auto;
    display: block;
  }


  /* 底部购物栏 */
  .cartBar{
    width:100%;
    height:45px;
    display: flex;
    position: fixed;
    bottom:0;
    background:#fff;
  }
  .cartBar_left,.cartBar_right{
    flex:1;
    display: flex;
  }
  .cartBar_left_item{
    display:flex;
    flex:1;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    font-size: 12px;
  }
  .cartBar_left_item>img{
    width:20px;
    height: 20px;
  }
  .cartBar_right{
    display:flex;
    line-height: 45px;
    text-align: center;
    color:#fff;
  }
  .cartBar_right>div{
    flex:1;
  }
  .cartBar_right>div:nth-child(1){
    background:#ef8e60;
  }
  .cartBar_right>div:nth-child(2){
    background:#eb544d;
  }
  .cartIcon_wrapper{
    position: relative;
  }
  .cartIcon{
    position: absolute;
    background:red;
    right:20px;
    width:20px;
    height: 20px;
    line-height: 20px;
    color:#fff;
    text-align: center;
    border-radius: 50%;
    top:-5px;
  }



  /* 弹出框 */
  .mask{
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    z-index: 9000;
    opacity: 0.7;
}
 
.modalDlg{
    width: 100%;
    height:45%;
    position: fixed;
    bottom:0;
    left: 0;
    z-index: 9999;
    background-color: #fff;
}

.modalDlg_top{
  padding:5px;
  padding-right:25px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #eee;
  
}
.modalDlg_top>img{
  width:80px;
  height: 80px;
}
.modalDlg_top_right{
  margin-left:20px;
  width:200px;
}
.modalDlg_top_right_name{
  display: flex;
  align-items: center
}
.modalDlg_top_right_name_tag{
  color:purple;
  display: inline-block;
  width:50px;
  text-align: center;
  border:1px solid purple;
  font-size: 10px;
  border-radius: 5px;
  margin-right:5px;
}
.modalDlg_top_right_name_tag+span{
  width:200px;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
} 
.modalDlo_bottom{
  margin-left:5px;
}
.cart_price{
  margin-top:15px;
  display: flex;
  justify-content: space-between;
  align-items: center
}
.cart_price>span:nth-child(1){
  color:red;
}

.modalDlo_center,.modalDlo_center_tit,.modalDlo_center_classify{
  width:100%;
}
.modalDlo_center_classify{
  display:flex;
  align-items: center;
  flex-wrap:wrap;
  margin:10px 0;
  padding-bottom: 20px;
}
.modalDlo_center_classify>div{
  border:1px solid #eee;
  padding:2.5px 5px;
  border-radius: 5px;
  margin-left:5px;
  text-align: center;
}
.modalDlo_center_tit{
  padding-left:10px;
}
.join_cart{
  width:100%;
  background: rgb(196, 75, 75);
  color:#fff;
  font-size: 20px;
  text-align: center;
  line-height: 40px;
  position: absolute;
  bottom:0;
}
.join_cart>div{
  background:#ef8e60;
  width: 50%;
  float: left;
  height: 100%;
  font-size: 16px;
}
.join_cart>div:last-child{
  background: #eb544d
}
button::after {
  border: none;
}
button {
  background-color: #fff;
  line-height: 16px;
  font-size: 10px;
  border-radius:0;
}
.comment_item_pic{
    display:flex;
  }
  .comment_item_pic>img{
    width:80px;
    height: 80px;
    margin-right: 10px;
  }

  /* 规格 */
  .selectClassify{
    border:red 1px solid !important;
    color:red;
  }

  /* 别人发起的拼团列 */
  .otherAssemble{
    margin-top:10px;
    background: #fff;
    padding:10px;
    &_tit{
      padding:10px;
      font-size: 16px;
    }
    &_list{
      &_item{
        display: flex;
        justify-content: space-around;
        align-items: center;
        height:50px;
        &_img{
          width: 50px;
          height: 100%;
          margin-right: 5px;
          img{
            width: 100%;
            height: 100%;
            border-radius:50%;
            
          }
        }
        &_content{
          font-size: 14px;
          display: flex;
          flex-wrap: wrap;
          height: 100%;
          align-content: space-around;
          &>div{
            width:100%;
          }
        }
        &_btn{
          color:#eb544d;
          border:1px solid #eb544d;
          padding:4px;
          border-radius: 2px;
        }
      }
      
    }
  }


  /* 拼团流程 */

  .count_tip{
    border-top:1px solid #eee;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-content: center;
    background: #fff;
    margin-bottom: 10px;
  }
  .count_tip>div:first-child{
    margin-left:10px;
  }

  .count_tip_tit{
    width: 100%;
    text-indent:20px;
    border-bottom: 1px solid #eee;
    height: 40px;
    line-height: 40px;
  }

  .count_tip_item{
    padding:10px 0;
    width:100%;
    display:flex;
    align-items: center;
    border-bottom:1px solid #eee;
  }
  .count_tip_item div:first-child{
    text-align: center;
    display: inline-block;
    color:#ff7b00;
    width: 20px;
    height: 20px;
    border:1px solid #ff7b00;
    padding:5px;
    margin:0 20px;
    border-radius: 50%;
    margin-bottom: 5px;
  }

  .swpier1{
    height: 100px;
  }
</style>

